<template>
    <div class="service">
      <div class="banner container-fuild text-center">债权服务</div>
      <div class="container" style="margin-top: -80px">
        <el-form :inline="true" :model="formInline" size="mini" class="form-inline">
          <el-form-item>
            <el-input v-model="formInline.user" placeholder="请输入债权名称、欠债金额等"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.region" placeholder="区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.type" placeholder="类型">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.status" placeholder="状态">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        <div style="margin-top: 100px;">
          <div v-for="(it, idx) in creditorList" :key="it.id" class="normal-item" :class="{'item-one' : !idx}">
            <div class="line-one">
              <span>主债务人姓名/机构名称:{{it.name}}</span>
              <span>债权金额:{{it.status}}</span>
              <span>发布时间:{{it.createTime}}</span>
              <span class="view-btn" @click="viewDetail(it.id)">查看详情</span>
            </div>
            <div class="line-two"><span>债务人所在地址：{{it.address}}</span></div>
          </div>
        </div>

        <el-pagination
            background
            layout="prev, pager, next"
            :total="90">
        </el-pagination>
      </div>
    </div>
</template>
<script>
import { WOW } from "wowjs";
export default {
    name: 'CreditService',
    data() {
        return {
          creditorList: [{
            id: '202101',
            name: '吴一凡',
            status: '待评估',
            createTime: '2021-08-31',
            address: '北京市海淀区中关村大厦'
          }, {
            id: '202102',
            name: '吴一凡',
            status: '待评估',
            createTime: '2021-08-31',
            address: '北京市海淀区中关村大厦'
          }, {
            id: '202103',
            name: '吴一凡',
            status: '待评估',
            createTime: '2021-08-31',
            address: '北京市海淀区中关村大厦'
          }, {
            id: '202104',
            name: '吴一凡',
            status: '待评估',
            createTime: '2021-08-31',
            address: '北京市海淀区中关村大厦'
          }, {
            id: '202105',
            name: '吴一凡',
            status: '待评估',
            createTime: '2021-08-31',
            address: '北京市海淀区中关村大厦'
          }, {
            id: '202106',
            name: '吴一凡',
            status: '待评估',
            createTime: '2021-08-31',
            address: '北京市海淀区中关村大厦'
          }, {
            id: '202108',
            name: '吴一凡',
            status: '待评估',
            createTime: '2021-08-31',
            address: '北京市海淀区中关村大厦'
          },{
            id: '202109',
            name: '吴特凡',
            status: '待评估',
            createTime: '2021-08-30',
            address: '北京市海淀区中关村大厦'
          }],
          formInline: {
            user: '',
            region: '',
            type: '',
            status: ''
          },
        }
    },
    mounted() {
        var wow = new WOW();
        wow.init();
    },
    methods: {
      onSubmit() {

      },
      viewDetail(id) {
        this.$router.push({path: `serviceDetail/${id}`})
      }
    },
}
</script>

<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 300px;
  line-height: 300px;
  background-image: url("../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}
.middle {
  margin: 40px auto;
}
.middle .el-form {
  display: flex;
  justify-content: space-between;
}
.form-left {
  flex: 1;
}
.middle .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.middle .title .line {
  content: '-';
  width: calc(100% - 160px);
  height: 1px;
  background: #ccc;
}
.normal-item {
  border: 2px solid #CADEF5;
  border-radius: 4px;
  padding: 20px 10px;
  margin-top: 30px;
}
.item-one {
  color: #fff;
  background: #3B8FEE;
}
.line-one {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #CADEF5;
  padding-bottom: 20px;
}
.line-two {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
.view-btn {
  cursor: pointer;
}
.el-pagination {
  text-align: center;
  margin-top: 40px;
}
</style>

